<template>
  <view :style="customStyle"  class="label fx-row-b main-bg">
    <view :style="'borderBottomColor:'+ props.bgColor + ';borderTopColor:'+props.bgColor" class="label-arrow"></view>
    <view :style="'backgroundColor:'+ props.bgColor+';color:'+props.color" class="label-text">{{ props.text }}</view>
  </view>
</template>
<script setup>
import {ref} from 'vue'
const isOpen = ref(false);
const props = defineProps({
  text:{
    type:String,
    default:'正在约车'
  },
  color:{
    type:String,
    default:'#f6f6f6'
  },
  bgColor:{
    type:String,
    default:''
  },
  customStyle:{
    type:Object,
    default:{}
  }
})

const handleOpen = ()=>{
  isOpen.value = !isOpen.value;
}
</script>

<style lang="scss" scoped>

.label{
  position: absolute;
  top:0;
  right:0;
  height:18px;
  background-color:transparent;
  //background-image: url("@/static/image/common/label-blue.png");
  //background-size:100% 100%;


  &-arrow{
    height:0;
    width: 0;
    border-top: 9px solid $main-e;
    border-left: 10px solid transparent;
    border-bottom: 9px solid $main-e;
  }
  &-text{
    height:18px;
    line-height: 1.3;
    padding:0 6px;
    flex-grow: 1;
    margin-left: -1px;
    background-color: $main-e;
    font-size: 13px;
    color: $main-text-e;
    text-align: center;
    vertical-align: center;
  }

}

</style>
